<template>
  <div class="test">
    <h1 class="msg">{{ msg }}</h1>
    <button @click="changeMsg">点我更新msg的值</button>
    <button @click="destroyedFn">点我，销毁我自己</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "hello vue",
      timer: null
    }
  },
  // 1、初始化阶段
  beforeCreate(){
    // 初始化了生命周期和事件对象
    console.log("组件创建前触发：beforeCreate",this.msg);// 获取不到data中的数据
  },
  created(){
    // 向vue注入了data和methods
    console.log("组件创建成功：created",this.msg);
    // 此刻获取不到DOM结构
    console.log(document.querySelector(".test"))  // null
    // 使用场景：用于获取页面初始数据（发起ajax请求）
  },
  // 2、挂载阶段
  beforeMount(){
    console.log("DOM挂载前触发：beforeMount");
    console.log(document.querySelector(".test"))  // null
  },
  mounted(){
    console.log("DOM挂载成功后触发：mounted");
    // 可以获取到真实DOM
    console.log(document.querySelector(".test")) // 获取成功
    // 应用场景：操作DOM（增删改查标签），或者获取页面初始数据（发起ajax请求）
    
    this.timer = setInterval(()=>{
      console.log("我是计时器，组件销毁的时候，我不会跟着被销毁");
    },2000)
  },
  // 3、更新阶段
  beforeUpdate(){
    // 获取不到更新后的DOM中的值
    console.log("data改变DOM更新前触发：", document.querySelector(".msg").innerHTML);
  },
  updated(){
    // 获取的到更新后的DOM中的值
    console.log("data改变DOM更新后触发：", document.querySelector(".msg").innerHTML);
  },
  // 4、销毁阶段
  beforeDestroy(){
    console.log("销毁前触发的钩子函数");
    // 使用场景：清除全局的事件或者计时器
    clearInterval(this.timer)
  },
  destroyed(){
    console.log("销毁后触发的钩子函数");
  },
  methods:{
    changeMsg(){
      this.msg = "hello world!"
    },
    destroyedFn(){
      //  调用destroy函数 会销毁当前组件
      this.$destroy()
    }
  }
}
</script>
